
@charset "utf-8";


@function r($px){
    @return ($px/40)*1rem;
    
}
@function px($px){
    @return ($px/2)*1px;
    
}
img{
    display: block;
}
body{
 overflow: hidden;
}

.full{
    width: 100%;
    height: 100%;
    display:block;
   
}
.full2{
    width: 100%;
    height: 100%;
    display:block;
   float: left;
}
.bg_xz{
    animation: bgxz 5s linear infinite ;
}
@keyframes bgxz{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
#web{
    position: relative;
    height: 100%;
    overflow: hidden;
    .jiazai{
    background: #4F4F4F;
    z-index: 100;
    overflow: hidden;
    
   .star{
       position: absolute;
       left: 0;
       right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      
   }
   >.mj{
        position: absolute;
        bottom: 5rem;
        z-index: 99;
       img{
        width: 90%;
       max-height: 100%;
       margin-left: 2%;
         text-align: center;
       }
      
   }
   >.earth{
       width: 100%;
        position: absolute;
        bottom: 0;
       img{
          width: 68%;
        
          margin-left: 32%;
       }
   }
   >.huojian{
    position: absolute;
    bottom: 6rem;
    right: 10rem;
    
    img{
            width:4rem;
            text-align: center;
    }
   }
   >.erji{
       position: absolute;
       bottom: r(50);
       right: 40%;
       img{
           width: r(200);
       }
       
   }
   >.loading{
       color: white;
       position: absolute;
       bottom: 5rem;
       left: r(20);
       span{
           color: white;
           font-size: 16px;
       }
       >#baifen{
           display: inline-block;
           margin-left: 1px;
       }
   }
}
>.shouye{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
   z-index: 200;
  
    .bg_sy{
        width: 100%;
       height: 100%;
        .bg{
              width: 256%;
    height: 132%;
    position: absolute;
    left: -14rem;
    top: -7rem;
        
    }
    }
    
    >.kou{
           position: absolute;
    top: -999px;
    left: -999px;
    right: -999px;
    bottom: -999px;
    margin: auto;
    height: 50%;
    z-index: 0;
    width: 100%;
        animation-iteration-count: infinite;
        >.mouth{
                top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
        margin: auto;
    width: 100%;
    height: 100%;
    img{
               margin: auto .75rem auto auto;
    max-width: 90%;
        top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
          
           
         
        }
       
    
        }
        
        >.whatsong{
            
            img{
                    height: 3.75rem;
    margin: auto 0 auto 40%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
            }
        }
        
    }
     
    >.logo{
        position: absolute;
        top: 0;
        right:0;
        padding: .5rem;
        img{
      width: 7rem;
     
         
        }
    }
    >.kg_title{
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top:3rem;
          z-index: 10;
      
        img{
            width: 98%;
            height: 8.2rem;
            margin: 0 auto;

        }
    }
    
    >.man{
        position: absolute;
        width: 100%;
        bottom: 2rem;
        img{
            display: block;
            float: left;
        }
        >.wath{
       position: absolute;
       left: 0.5rem; 
       top: -0.5rem;  
       width: 32%;
            animation-iteration-count: infinite;
        }
        >.l_man{
            
            width: 49%;
           margin-left: 2%;
            z-index: 11;
        }
        >.r_man{
           
            width: 49%;
          
          
            z-index: 11;
        }
        >.nk1{
            position: absolute;
            right: 0;
            top:2.2rem;
            width: 7.5%;
        }
        >.nk2{
             position: absolute;
            right: 0;
           bottom:5rem;
            width: 7.5%;
        }
        >.nk3{
             position: absolute;
            right:42%;
            top:2.2rem;
            width: 7.5%;
        }
        >.nk4{
             position: absolute;
            right:42% ;
            bottom: 5rem;
            width: 7.5%;
        }
       
    }
    >.begin{
           width: 100%;
    text-align: center;
    position: absolute;
    bottom: r(40);
    z-index:666;
     animation-iteration-count: infinite;
     button{
         display: block;
         margin: 0 auto;
            width: 45%;
    height: 3rem;
    margin: 0 auto;
    background: url(../img/index_start.png) no-repeat;
    background-size: 100% 100%;
     }
//  img{
//     width: 45%;
//     height: 80%;
//      margin: 0 auto;
//  }
    }
    
    
}
>.dati{
    width: 100%;
    height: 100%;
    background: white;
  display: none;
  overflow: hidden;
    
    >.movice{
    position: absolute;
    overflow: hidden;
    >.bg_mv{
        width: 100%;
        height: 100%;
       
        img{
            width: 100%;
            height: 100%;
        }
    }
   
    >.wukong{
        width: 100%;
        position: absolute;
       
        top:0;
        
         >.dontkwon{
             width: 90%;
        position: relative;
        top: 1rem;
        
    }
    >.xy{
        position: relative;
        top:-1rem;
    }
    >.qiang{
        width: 104%;
        position: relative;
        
        bottom: 5.25rem;
      
    }
        
        img{
            width: 100%;
        }
        
    }
}
>.rock{
   width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    transform: translateX(100%);
    >.bg_sy{
        width: 100%;
       height: 100%;
        .bg{
              width: 256%;
    height: 132%;
    position: absolute;
    left: -14rem;
    top: -7rem;
  
    }
    }
    >.deng{
        width: 100%;
        position: absolute;
        top: 0;
        img{
            position: absolute;
            width: 100%;
        }
    }
    >.mid_w{
        position: relative;
        top: -24rem;
    >.mid{
        position: relative;
    height: 14rem;
    z-index: 800;
    text-align: center;
    >.left{
            position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    >.wow1{
            position: absolute;
    left: 0;
    bottom: 6.25rem;
    width: 100%;
    }
    >.audis1{
            position: absolute;
    left: 0;
    bottom: .25rem;
    width: 160%;
    }
    }
    
    >.right{
            position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    text-align: center;
    >.wow2{
            position: absolute;
    right: 0;
    bottom: 6.25rem;
    width: 100%;
    }
    >.audis2{
            position: absolute;
    right: 0;
    bottom: .25rem;
    width: 130%;
    }
    
    }
    >.rockman{
        position: relative;
        text-align: center;
        >.songer{
            position: absolute;
    top: -1.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 70%;
    z-index: 2;
    
        }
        >.stage{
                position: absolute;
    width: 100%;
    left: 0;
    top: 10rem;
        }
    }
    }
}
    
}

>.jindian{
    
    position: absolute;
    transform: translateX(100%);
    overflow: hidden;
   
    >.jd_bg{
        height: 100%;
        width: 100%;
        img{
        height: 116%;
        width: 160%;
        position: absolute;
        top: -5rem;
        left: -2rem;
        }
    }
    >.deng{
        position: absolute;
        top: 0;
        width: 100%;
        img{
            width: 90%;
            margin: 0 auto;
        }
    }
    >.mans{
        position: absolute;
        top: 3rem;
        left: 0;
        width: 100%;
        z-index: 11;
       >.threemans{
            width: 100%;
        }
        >.firstpf{
            position: absolute;
            top: 5rem;
            width: 10rem;
        }
    }
    >.feizao{
        width: 100%;
        position: absolute;
        top: 4rem;
        z-index: 12;
        >.feizaoman{
            width: 11rem;
            margin: 0 auto;
            position: relative;
            left: 3rem;
            
        }
        >.feiZao{
            width: 7rem;
          position: relative;
          top: -4rem;
          left: 3rem;
            animation-iteration-count: infinite;
        }
        >.pf2{
            width: 10rem;
            position: absolute;
            top: 6rem;
            right: 0;
        }
    }
    >.diban{
      
        height: 10rem;
        position: absolute;
        top: 12rem;
        img{
            width: 100%;
            height: 10rem;
        }
    }
}
>.che{
    position: absolute;
    transform: translateX(100%);
    overflow: hidden;
    >.che-bg{
        width: 100%;
        height: 100%;
        img{
        width: 149%;
        height: 121%;
        position: relative;
        top: -9rem;
        right: 5rem;
        }
    }
    >.deng{
        width: 100%;
        position: absolute;
        top: 0;
        img{
            width: 95%;
            margin: 0 auto;
        }
    }
    >.love{
        width: 100%;
        position: absolute;
        top: 4rem;
        >.yao{
           
           position: relative;
    top: 0;
    width: 54%;
    margin: 0 auto;
        }
        >.car{
                width: 100%;
    position: relative;
    top: -1rem;
    animation-iteration-count: infinite;
        }
        >.hua{
            position: absolute;
    right: 1rem;
    top: 5rem;
    width: 4rem;
        }
    }
    
}
>.old{
    position: absolute;
    transform: translateX(100%);
    overflow: hidden;
    >.old_bg{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    >.deng{
       width: 100%;
        position: absolute;
        top: 0;
        
        img{
           width: 90%;
           position: absolute;
           right: -20%;
        }
    }
    >.l_juhua{
        
        position: absolute;
        top: 11.5rem;
        animation-iteration-count: infinite;
        img{
            width: 6.5rem;
        }
    }
    >.oldman{
        width: 100%;
        position: absolute;
        top: 3rem;
        img{
            width: 80%;
            margin: 0 auto;
        }
    }
    >.r_juhua{
        
        position: absolute;
        top: 11rem;
        right: 0;
        animation-iteration-count: infinite;
        img{
            width: 5rem;
        }
    }
}
>.liuxing{
    position: absolute;
    transform: translateX(100%);
    >.lx_bg{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    >.yongqi{
        width: 100%;
        position: absolute;
        top: 0;
        img{
            width: 68%;
        }
    }
    >.qiuhun{
        width: 100%;
        position: absolute;
        top: 8rem;
        img{
            width: 100%;
        }
    }
    >.wumen{
        width: 100%;
        position: absolute;
        top: 2.8rem;
        img{
            width: 50%;
           
            position: absolute;
            right: 0;
        }
    }
}

>.timu{
            
    width: 18.75rem;
    text-align: center;
    position: absolute;
    bottom: 1rem;
    left: 0;
    height: 40%;
    z-index: 100;
        
        >.select{
        position: absolute;
    left: 1rem;
    right: 4.5rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    
        }
        >.A{
                
            background: url("../img/selectA.png")no-repeat center;
               bottom: 5.75rem;   
                background-size: 100% 100%;  
        }
         >.B{
             
            background: url("../img/selectB.png")no-repeat center;
              background-size: 100% 100%;     
                bottom: 3.25rem;    
            
        }
         >.C{
             
            background: url("../img/selectC.png")no-repeat center;
              background-size: 100% 100%;     
                bottom:.75rem;    
        }
        >.clock{
               width: 3rem;
    height: 3rem;
    position: absolute;
    bottom: 5rem;
    right: 1rem;
    background: url(../img/smallMouth.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 99;
    text-align: center;
    line-height: 3rem;
    font-size: .8rem;
    font-weight: bold;
    animation-iteration-count: infinite;
        }
         
    }
    >.tips{
          opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    margin-top: -1.25rem;
    margin-left: -6.25rem;
    color: #FFF;
    font-size: .75rem;
    background: rgba(0,0,0,.4);
    border-radius: .2rem;
    z-index: 50;
    text-align: center;
    
    
    }
    
}

>.grade{
    overflow: hidden;
    position: absolute;
    >.last_bg{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    >.touxiang{
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        img{
            width: 7.25rem;
        }
        >.user_head{
            width: 2rem;
            border-radius: 100%;
            position: absolute;
            top: r(4.5);
            left:0.338rem;
            img{
                width: 100%;
            }
        }
        >.username{
            font-size: r(25);
            position: absolute;
           top: 0.9rem;
        left: 3.5rem;
        }
    }
    >.logo{
        position: absolute;
        top: 0.6rem;
        right: 0.5rem;
        
        img{
            width: 6.25rem;
        }
    }
    >.levea{
        position: absolute;
        top: 3rem;
        width: 100%;
        img{
            width: 6rem;
            margin: 0 auto;
        }
        >.duoshao{
            width: 100%;
            position: relative;
            >#howmuch_right{
                display: inline-block;
                position: absolute;
                top: 0.5rem;
                left:7rem;
               
                
            }
            
            >#howmuch{
            width: 7rem;
        } 
        }
       
    }
    >.text{
           position: absolute;
    top: 13rem;
    left: .25rem;
    padding: 0.4rem;

    height: 2.7rem;
    background: url(../img/text.png) no-repeat;
    background-size: 100% 100%;
    font-size: .8rem;
    line-height: 1.25rem;
    width: 94.5%;
    text-align: center;
    }
    >.btn{
        position: absolute;
    top: 17rem;
    width: 100%;
    left: 50%;
    margin-left: -50%;
    text-align: center;
    a{
        font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
    text-decoration: none;
    font-size: .75rem;
    color: #251d19;
    display: inline-block;
    width: 5.25rem;
    height: 1.5rem;
    }
    >#agin{
    background: url(../img/buttonleft.png) no-repeat;
    background-size: 100% 100%;
    padding-left: 1.25rem;
    }
    >#pengyq{
    background: url(../img/buttonright.png) no-repeat;
    background-size: 100%;
    padding-right: 1.25rem;
    }
    }
    
    >.rankBox{
            position: absolute;
    bottom: 1%;
    width: 100%;
    >.pengyouquantitle{
        text-align: center;
        width: 100%;
        img{
            width: 55%;
            margin: 0 auto;
            text-align: center;
        }
    }
    >.list{
            background: url(../img/paiming_bg.png) no-repeat;
    background-size: 100%;
    margin: -.75rem .5rem 0;
    padding: 1.25rem;
    ul{
            height: 4.5rem;
    overflow-y: scroll;
    li{
            display: block;
    margin: .25rem 0;
    height: 3rem;
    overflow: hidden;
    
     >.rankHead{
        display: inline-block;
    float: left;
    img{
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    }
    }
    
    
    }
    
    
    
    
    }
   
    
    }
    }
    
  
}
    >.ydShare{
            display: none;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 1700;
    img{
            position: absolute;
    top: 2.15rem;
    right: 2.75rem;
    width: 13.5rem;
    height: 9.175rem;
    }
    }

}


.tishi{
    animation: tip 1.5s linear 1;
}
@keyframes tip{
    0%{
        
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.xz_out{
    animation: out 500ms linear;
    
}
@keyframes out{
    0%{}
    100%{
        transform: rotateZ(360deg);
    }
}
